<template>
  <div class="news-container">
    <div class="main-container">
      <div class="search-form flex-grow-0">
        <div class="search-form__common">
          <!-- 常规搜索 -->
          <transition name="el-zoom-in-top">
            <div v-show="!searchAdvancedVisable">
              <el-input style="width:250px" clearable v-model="searchForm.keyword" size="small">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input>
              <ui-button type="blue" style="margin-left:15px;" @click="doSearch">搜索</ui-button>
              <ui-button @click="searchAdvancedVisable=true" icon="icon icon-arr-down">高级搜索</ui-button>
            </div>
          </transition>
          <!-- 高级搜索 -->
          <transition name="el-zoom-in-top">
            <div v-show="searchAdvancedVisable">
              <div class="search-top-bar">
                <div class="mini-title" style="display:inline-block">
                  高级搜索模式
                </div>
                <div class="search-block">
                  <ui-button @click="searchAdvancedVisable=false" icon="icon icon-arr-up">返回常规搜索</ui-button>
                  <ui-button @click="doSetting('search')">配置搜索条件</ui-button>
                  <ui-button>保存搜索条件</ui-button>
                </div>
              </div>
              <m-searchAdvanced></m-searchAdvanced>
            </div> 
          </transition>
        </div>
        
      </div>
      <div class="news-main">
        <div class="news-source-box">
          <template v-for="item in sourceList">
            <div class="source-item" :class="{active: active == item.id}" @click="changeSource(item.id)">
              <div class="collection-box">
                <i class="icon icon-collection" :class="{active:item.isCollection}"></i>
              </div>
              <div class="user-head flex-grow-0">
                <img :src="item.head" alt="">
              </div>
              <div class="info">
                <p class="text-nowrap">{{item.name}}</p>
                <p class="text-nowrap">{{item.companyName}}</p>
                <p class="text-nowrap">{{item.resume}}</p>
                <p class="text-nowrap">项目：{{item.project}}</p>
              </div>
            </div>
          </template>
        </div>
        <div class="news-content">
          <div v-for="item in newsData" class="news-item">
            <div class="main">
              <div class="mb-20">
                <p>{{item.createTime}}</p>
                <p v-if="item.from">{{item.from}}</p>
              </div>
              <div v-html="item.content"></div>
              <i class="icon" :class="`icon-contact-${item.type}`"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right-side" style="width: 300px;" :class="{'is-fixed': isFixed}">
      <div class="ats-tool">
        <div class="mini-title">ATS工具</div>
        <m-atsTools></m-atsTools>
      </div>
    </div>
    
  </div>
</template>

<script>
import {Input} from 'element-ui'
import ModuleAdvancedSearch from './components/advancedSearch'
import AtsTools from '@/components/common/components/atsTools'
  export default {
    components: {
      [Input.name]: Input,
      'm-searchAdvanced': ModuleAdvancedSearch,
      'm-atsTools': AtsTools
    },
    data () {
      return {
        searchForm: {},
        searchAdvancedVisable: false, //高级搜索
        sourceList: [],
        active: null,
        newsData: [],
        isFixed: false
      }
    },
    created() {
      this.loadData()
      window.addEventListener('scroll', () => {
        if(this.$route.path.indexOf('/news') == 0){
          this.initSticky()
        }
      })
    },
    methods: {
      initSticky() {
        const _height = this.$util.getScrollTop()
        const _zoom = this.$util.getZoom()
        const topHeight = document.getElementsByClassName('temp-header')[0].clientHeight
        if(_height >= topHeight * _zoom) {
          this.isFixed = true
        } else {
          this.isFixed = false
        }
      },
      loadData() {
        for(var i = 0; i < 10; i++){
          this.sourceList.push({
            id: i+1, //id
            head: 'https://apic.douyucdn.cn/upload/avatar/003/92/16/12_avatar_middle.jpg', //头像
            isCollection: false, //是否收藏
            name: 'Marco', //姓名
            companyName: '腾讯', //公司名
            resume: '高级开发工程师-9年', //简历
            project: 'S3精兵强将', //项目
          })
        }
        this.active = this.sourceList[0].id      
        this.getNews()
      },
      getNews() {
        this.newsData = [
          {
            createTime: '2018-11-8，上午11：47',
            from: '来自腾讯微信事业群的工作意向沟通',
            type: 'email',
            content: '<p>Chao Deng您好，</p><p>我是腾讯公司的HR Leanne，感谢您百忙之中打开这封邮件。 腾讯微信事业群目前开放了一些数据挖掘与机器学习方向的高级工程师 & 算法专家 岗位, focus在微信搜索推荐以及人工智能等重点项目。        如果您恰好对微信的发展平台感兴趣，请留下手机号码方便我们沟通具体的岗位信息，您也可以添加我的微信LuckyLeanne1005进行咨询。</p>'
                    + '<p> </p><p>期待您的回复</p><p> </p><p>Best regards.</p><p>Leanne from Tencent</p>',
          },
          {
            createTime: '2018-11-8，上午11：47',
            from: '',
            type: 'wx',
            content: '<p>Chao Deng想跟您交流。记得回复对方，开始对话吧！</p><p>Hi Leanne, 谢谢联系，我暂时没有更换工作的打算，如果有计划，再跟您联系！</p>'
          },
          {
            createTime: '2018-11-8，上午11：47',
            from: 'ChaoDeng',
            type: 'mobile',
            content: '<p>您与Chao Deng通了电话，并做了如下备注：</p><p></p><p>Deng是一位非常资深的产品架构师，目前在阿里巴巴工作，P8级别，已婚，并在杭州有房</p>'
                    + '<p>目前换工作的意愿度不高，主要是因为家庭，但他并不排斥了解新的机会</p><p>已经加了微信，后续可以维护关系</p>'
          },
          {
            createTime: '2018-11-8，上午11：47',
            from: 'ChaoDeng',
            type: 'mobile',
            content: '<p>您与Chao Deng通了电话，并做了如下备注：</p><p></p><p>Deng是一位非常资深的产品架构师，目前在阿里巴巴工作，P8级别，已婚，并在杭州有房</p>'
                    + '<p>目前换工作的意愿度不高，主要是因为家庭，但他并不排斥了解新的机会</p><p>已经加了微信，后续可以维护关系</p>'
          },
          {
            createTime: '2018-11-8，上午11：47',
            from: 'ChaoDeng',
            type: 'mobile',
            content: '<p>您与Chao Deng通了电话，并做了如下备注：</p><p></p><p>Deng是一位非常资深的产品架构师，目前在阿里巴巴工作，P8级别，已婚，并在杭州有房</p>'
                    + '<p>目前换工作的意愿度不高，主要是因为家庭，但他并不排斥了解新的机会</p><p>已经加了微信，后续可以维护关系</p>'
          },
          {
            createTime: '2018-11-8，上午11：47',
            from: 'ChaoDeng',
            type: 'mobile',
            content: '<p>您与Chao Deng通了电话，并做了如下备注：</p><p></p><p>Deng是一位非常资深的产品架构师，目前在阿里巴巴工作，P8级别，已婚，并在杭州有房</p>'
                    + '<p>目前换工作的意愿度不高，主要是因为家庭，但他并不排斥了解新的机会</p><p>已经加了微信，后续可以维护关系</p>'
          }
        ]
      },
      doSearch () {
        
      },
      changeSource(id) {
        this.active = id;
        this.getNews()
      }
    }
  }
</script>

<style lang="scss">
  .news-container {
    flex: 1;
    display: flex;
    padding: 20px;
    .main-container{
      flex: 1;
      display: flex;
      flex-direction: column;
      position: absolute;
      margin-right: 360px;
      width: calc(100% - 360px)
    }
    .ats-tool{
      width: 300px;
      box-sizing: border-box;
      padding: 18px 10px;
      background: #f9f9f9;
    }
    .news-main{
      display: flex;
      flex-direction: row;
      margin-top: 20px;
      .news-source-box{
        flex-grow: 0;
        width: 300px;
        overflow-y: auto;
        margin-right: 20px;
        .source-item{
          height: 118px;
          box-sizing: border-box;
          border: 1px solid transparent;
          display: flex;
          align-items: center;
          background: #fff;
          cursor: pointer;
          .collection-box {
            width: 50px;
            flex-grow: 0;
            text-align: center;
          }
          .info{
            flex-grow: 0;
            width: 160px;
            margin-left: 20px;
            p{
              color: #919191;
              text-align: left;
              padding: 4px 0;
            }
          }
        }
        .source-item.active{
          border-color:#0073dd;
          box-shadow: 1px 1px 3px rgba(0,0,0,.2)
        }
        .source-item:nth-child(even){
          background: #f4f5f9;
        }
      }
    }
    .news-content{
      flex: 1;
      overflow-y: auto;
      .news-item{
        position: relative;
        padding: 25px 0;
        width: 100%;
        p{
          color: #919191;
          line-height: 22px;
          font-size: 14px;
          word-break: break-all;
        }
        .icon{
          position: absolute;
          right: 0;
          top: 25px;
        }
      }
      .news-item:not(:last-child){
        border-bottom: 1px solid #919191;
        
      }
    }
  }
  
</style>
